<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <input type="file" name="" id="file" onchange="change()">
   <button class="btn">点击</button>
</body>
</html>

<script>
;(function (win,doc) {
    var First = function(url,file,obj){
        var _this = this;
        var size = file.size,
            type = file.type,
            accept = ' image/jpeg, image/png, image/jpg ';
        var form = new FormData;
        if(accept.indexOf(type) == -1){  
            alert('请选择我们支持的图片格式！');  
            return false;  
        }
        if (size/1024 > 1025) {
            _this.First.prototype.photoCompress(file,obj,function(base64Codes) {
                var bl = _this.First.prototype.convertBase64UrlToBlob(base64Codes);
                form.append("file", bl,"file_"+Date.parse(new Date())+".jpg");
                var xhr = new XMLHttpRequest();
                xhr.open('post',url);
                xhr.onreadystatechange = function (params) {
                    if (xhr.readyState == 4 && xhr.status == 200) {
                        console.log('成功');
                    } else {
                        console.log('失败');
                    }
                }
                xhr.send(form);
            })
        }else{
            form.append("file",file);
            var xhr = new XMLHttpRequest();
            xhr.open('post',url);
            xhr.onreadystatechange = function (params) {
                if (xhr.readyState == 4 && xhr.status == 200) {
                    console.log('成功');
                } else {
                    console.log('失败');
                }
            }
            xhr.send(form);
        }
    };

    First.prototype = {
        photoCompress:function(file,obj,objDiv){
            var _this = this;
            var ready=new FileReader();
            /*开始读取指定的Blob对象或File对象中的内容. 当读取操作完成时,readyState属性的值会成为DONE,如果设置了onloadend事件处理程序,则调用之.同时,result属性中将包含一个data: URL格式的字符串以表示所读取文件的内容.*/
            ready.readAsDataURL(file);
            ready.onload=function(){
                var re=this.result;
                _this.canvasDataURL(re,obj,objDiv)
            }
        },
        canvasDataURL:function(path, obj, callback){
            var img = new Image();
            img.src = path;
            img.onload = function(){
                var that = this;
                // 默认按比例压缩
                var w = that.width,
                    h = that.height,
                    scale = w / h;
                w = obj.width || w;
                h = obj.height || (w / scale);
                var quality = 0.7;  // 默认图片质量为0.7
                //生成canvas
                var canvas = document.createElement('canvas');
                var ctx = canvas.getContext('2d');
                // 创建属性节点
                var anw = document.createAttribute("width");
                anw.nodeValue = w;
                var anh = document.createAttribute("height");
                anh.nodeValue = h;
                canvas.setAttributeNode(anw);
                canvas.setAttributeNode(anh);
                ctx.drawImage(that, 0, 0, w, h);
                // 图像质量
                if(obj.quality && obj.quality <= 1 && obj.quality > 0){
                    quality = obj.quality;
                }
                // quality值越小，所绘制出的图像越模糊
                var base64 = canvas.toDataURL('image/jpeg', quality);
                // 回调函数返回base64的值
                callback(base64);
            }
        },
        convertBase64UrlToBlob:function(urlData){
            var arr = urlData.split(','), mime = arr[0].match(/:(.*?);/)[1],
                bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
            while(n--){
                u8arr[n] = bstr.charCodeAt(n);
            }
            return new Blob([u8arr], {type:mime});
        }
    };
    win.First = First;

})(window,document)
</script>
<script>
    function change(){
        var file = document.getElementById("file").files[0];
        var url = 'www.baidu.com';
        var obj = {quality:0.1};
        // console.log(file[0])
        First(url,file,obj);
    }
</script>